import * as echarts from 'echarts/core';
const color: string[] = ['#4dce75', '#ffd43e', '#3a9ffb', '#34cbcf'];
const pieData = [
  {
    value: 12.43,
    name: '其他账户',
  },
  {
    value: 32.68,
    name: '企业对公账户',
  },
  {
    value: 25.75,
    name: '非企业对公账户',
  },
  {
    value: 16.87,
    name: '个人账户',
  },
  {
    value: 12.26,
    name: '自身账户',
  },
];
const pieOptions: object = {
  legend: {
    left: 'center',
    bottom: 0,
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}：{c} ({d}%)',
  },
  color: ['#2882FF', '#28CDBC', '#FF7B7B', '#F6BD16', '#9A6DE2'],
  series: [
    {
      name: '专题资源',
      type: 'pie',
      center: ['50%', '40%'],
      radius: ['35%', '50%'],
      label: {
        normal: {
          formatter: (params) => {
            return '{value|' + params.name + '\n' + params.value + '}';
          },
          rich: {
            value: {
              fontSize: 12,
              color: '#000',
              padding: [4, 0, 0, 4],
            },
          },
        },
      },
      data: pieData,
      itemStyle: {
        borderWidth: 1, //扇区间隔大小
        borderColor: '#fff', //和背景色保持一致
      },
    },
  ],
};

const lineOrBarColor = ['#4A8CFF', '#28CDBC'];

const lineOrBarData = {
  xName: [
    '2021年1月',
    '2021年2月',
    '2021年3月',
    '2021年4月',
    '2021年5月',
    '2021年6月',
    '2021年7月',
    '2021年8月',
    '2021年9月',
    '2021年10月',
    '2021年11月',
    '2021年12月',
  ],
  barSeries: {
    name: '存款余额与未结清贷款总额比',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
  },
  lineSeries: {
    name: '一级行业分位点',
    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
  },
};
const lineOptions = {
  color: lineOrBarColor,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      data: lineOrBarData.xName,
      axisTick: { show: false },
      // axisPointer: {
      //   type: 'shadow',
      // },
    },
  ],
  yAxis: [
    {
      type: 'value',
      // name: '水量',
      // min: 0,
      // max: 250,
      // interval: 50,
      axisLabel: {
        formatter: '{value}',
      },
    },
    {
      type: 'value',
      // name: '温度',
      // min: 0,
      // max: 25,
      // interval: 5,
      axisLabel: {
        formatter: '{value} %',
      },
    },
  ],
  series: [
    {
      name: lineOrBarData.barSeries.name,
      type: 'bar',
      data: lineOrBarData.barSeries.data,
    },
    {
      name: lineOrBarData.lineSeries.name,
      type: 'line',
      smooth: true,
      symbol: 'none',
      yAxisIndex: 1,
      data: lineOrBarData.lineSeries.data,
      itemStyle: {
        normal: {
          lineStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#28CDBC',
              },
              {
                offset: 0.5,
                color: '#28CDBC',
              },
              {
                offset: 1,
                color: '#28CDBC',
              },
            ]),
            shadowColor: '#28CDBC',
            shadowBlur: 8,
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#28CDBC',
              },
              {
                offset: 0.6,
                color: 'rgba(255, 120, 0, 0)',
              },
            ]),
          },
        },
      },
    },
  ],
};

// 雷达图
const radarData = [
  { text: '经营', desc: '中上上', value: '70', max: 100 },
  { text: '企业主', desc: '中上', value: '90', max: 100 },
  { text: '关联方', desc: '低', value: '8', max: 100 },
  { text: '融资行为', desc: '高', value: '60', max: 100 },
  { text: '企业财务', desc: '高', value: '30', max: 100 },
];
let dataArr: string[] = [];
let i = -1;
radarData.forEach((item) => {
  dataArr.push(item.value);
});

const radarOPtions = {
  radar: [
    {
      indicator: radarData,
      radius: 80,
      name: {
        formatter: (a, b) => {
          i += 1;
          return '{a|' + a + '(' + '}{b|' + radarData[i].desc + '}' + ')';
        },
        textStyle: {
          fontSize: 12,
          color: '#666',
          rich: {
            a: {
              color: '#666',
              fontSize: 12,
              align: 'center',
            },
            b: {
              color: '#2882FF',
              fontSize: 12,
              height: 16,
              align: 'center',
            },
          },
        },
      },
    },
  ],
  series: [
    {
      type: 'radar',
      tooltip: {
        trigger: 'item',
      },
      itemStyle: {
        normal: {
          color: ['#2882FF'],
        },
      },
      areaStyle: {},
      data: [
        {
          value: dataArr,
          name: '综合评价',
          symbolSize: 2, //圆圈大小
          itemStyle: {
            //调点的样式
            show: true,
            color: '#2882FF',
            shadowColor: '#2882FF',
            shadowBlur: 10,
            fontSize: 28,
          },
        },
      ],
    },
  ],
};

/** 堆积柱形图 注：每个series 的对象分别设置一个数值 */
const pillUpData = {
  xName: [
    '1月',
    '2月',
    '3月',
    '4月',
    '5月',
    '6月',
    '7月',
    '8月'
  ],
  seriesData: [
    {
      name: '金融类/金融企业',
      data: [820, 832, 901, 111, 222, 333, 444, 555],
    },
    {
      name: '房地产/建筑/基建企业',
      data: [220, 182, 191, 999, 888, 777, 666, 555],
    },
    {
      name: '非企业对公账户',
      data: [820, 832, 901, 555, 666, 777, 888, 999],
    },
  ],
};

const seriesALl = [];
const pillUpColor = ['#4A8CFF', '#28CDBC', '#FF7B7B'];

let  gap = 0

pillUpData.seriesData.forEach((item, index) => {
  if (index === 3 || index === 6) {
    gap = 30
  } else {
    gap = 10
  }
  seriesALl.push({
    name: item.name,
    type: 'bar',
    stack: 'total',
    barGap: `${gap}%`,
    // barWidth: `${gap}%`,
    itemStyle: {
      normal: {
        color: pillUpColor[index],
      },
    },
    data: item.data,
  });
});

const EachPillUpOption = {
  legend: {
    left: 'center',
    bottom: -5,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    top: '8%',
    left: '0',
    right: '0',
    bottom: '7%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    axisTick: { show: false },
    data: pillUpData.xName,
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  series: seriesALl,
};

// 双柱状图
const doubleBarData = {
  xName: [
    '1月一剑光寒十九周',
    '2月一剑光寒十九周1月一剑光寒十九周',
    '3月一剑光寒十九周',
    '4月一剑光寒十九周',
    '5月一剑光寒十九周',
    '6月一剑光寒十九周',
    '7月一剑光寒十九周',
    '8月一剑光寒十九周',
    '9',
    '10月一剑光寒十九周',
    '11月一剑光寒十九周',
    '12月一剑光寒十九周',
  ],
  seriesData: [
    {
      name: '借',
      data: [832, 901, 111, 222, 333, 444, 555, 666, 777, 888, 999],
    },
    {
      name: '贷',
      data: [220, 182, 191, 999, 888, 777, 666, 555, 444, 333, 222, 111],
    },
  ],
};

// 横向双柱图
const douebleBarseries = [];
const doubleBarColor = ['#4A8CFF', '#28CDBC'];

doubleBarData.seriesData.forEach((item, index) => {
  douebleBarseries.push({
    name: item.name,
    type: 'bar',
    barGap: `${gap}%`,
    color: doubleBarColor[index],
    data: item.data,
  });
});

const doubleBarOptions = {
  tooltip: {
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    bottom: 0,
    // data: ['2011年', '2012年']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '8%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    axisTick: { show: false },
    data: doubleBarData.xName,
    axisLabel: {
      fontStyle: 'italic',
      rotate: 45,
      veriticalAlign: 'top',
      margin:8,
      formatter: (value:string) => {
         const valLength = value.length
         const strNum = 6
         let str = ''
         if (valLength > strNum) {
           str = value.substring(0,strNum) + '\n' + value.substring(strNum)
           return str
         } else {
           return value
         }
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  series: douebleBarseries,
};

// 纵向双柱状图
const YBarData = {
  xName: [
    '12月',
    '11月',
    '10月',
    '9月',
    '8月',
    '7月',
    '6月',
    '5月',
    '4月',
    '3月',
    '2月',
    '1月',
  ],
  seriesData: [
    {
      name: '未结清贷款余额',
      data: [820, 832, 901, 111, 222, 333, 444, 555, 666, 777, 888, 999],
    },
    {
      name: '未结清非抵质押类贷款余额',
      data: [220, 182, 191, 999, 888, 777, 666, 555, 444, 333, 222, 111],
    },
  ],
};

// 横向双柱图
const YBarseries = [];
const YBarColor = ['#4A8CFF', '#28CDBC'];

YBarData.seriesData.forEach((item, index) => {
  YBarseries.push({
    name: item.name,
    type: 'bar',
    color: YBarColor[index],
    data: item.data,
  });
});

const YBarOPtions = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    // data: ['2011年', '2012年'],
    bottom: 0,
  },
  grid: {
    left: '0%',
    right: '0%',
    bottom: '10%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  yAxis: {
    type: 'category',
    data: YBarData.xName,
    axisTick: { show: false },
  },
  series: YBarseries,
};

export {
  pieOptions,
  lineOptions,
  radarOPtions,
  EachPillUpOption,
  doubleBarOptions,
  YBarOPtions,
};;

const formatXVale = (val:string) => {
  let str = ''
  const num = 6 // 每行显示字数
  const valLength = val.length // 该项x轴字数
  const row = Math.ceil(valLength / num) 
  if (row > 1) {
    for(let i = 0; i< row; i++) {
      let temp = ''
      let start = i * num
      let end = start + num 
      temp = val.substring(start,end) + '\n'
      str += temp
    }
    return str
  } else {
    return val
  }
}